Thank you for purchasing Envision Theme. I hope you like it.
If you have any question or problem about the theme, please contact us by using our support center. However before getting support, please read this documentation and watch video tutorials.
Enjoy it!
Download the Envision theme package from ThemeForest and unzip it. Any good quality zip program will do. Just follow the unzip instructions of your program carefully. Some give you the option of unzipping only a portion, or all, of the files. You want to select "all". Once unzipped, you will find the following folders will be in the unzipped directory:
envision.zip
- the zip file of the themeenvision-child.zip
- the zip file of child themedocumentation/
- theme documentationlicensing/
- licenses for the themeresources/
sample skins/
- importable skin filessample sliders/
- importable slider files
revolution slider/
- importable slider files for revolution sliderpsd/
- all psd files of the themedummy data/
- importable xml files for sample datastools/
- tools to help you
searchreplacedb.php
- PHP script for searching and replacing mysql database fields smoothlychange log/
- changelog files for the theme versions
To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress
When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:
FTP Upload: Unzip the envision.zip
file and using a FTP client software, upload the unzipped theme folder into the /wp-content/themes/ folder on your server.
The folder must be like this: (
/wp-content/themes/envision/
)
WordPress Upload: Navigate to Appearance
› Add New Themes
› Upload
. Go to browse, and select the zipped theme file in the package (envision.zip
). Hit “Install Now” and the theme will be uploaded and installed.
Once the theme is uploaded, you need to activate it. Go to Appearance
› Themes
and activate your chosen theme.
› Control Panel
› Dahsboard
(Also the importer can be found in Control Panel
› System
› Demo Contents
tab.)
You should setup your permalinks to look pretty.
Go to ›
Settings
› Permalinks
, choose the Custom Structure, and use this: /%category%/%postname%/
To set up the homepage you must create a new page, you can do so by navigating to Pages
› Add New
You can give this page a title yet you do not have to include any content. Select the a template from the Page. And click or
You can create the homepage's content using the content composer or classic wordpress editor. (See: using of the content composer)
After creating your home page, navigate to ›
Settings
› Reading
, set Front page displays: A static page, and select your home page as front page.
Your homepage can be viewed by visiting your root URL.
To set up the blog, you must create a new page with no content, you can do so by navigating to ›
Pages
› Add New
. Name it "Blog" and set a template for the page and
click
After creating your blog page, navigate to ›
Settings
› Reading
, set Front page displays: A static page, and select your page named Blog as posts page
.
Your blog index can be viewed by visiting the page you just published.
To set up the main portfolio page, you must create a new page, you can do so by navigating to ›
Pages
› Add New
. Name it as "Portfolio" or another name you wish. And hit button.
After creating the main portfolio page, go to ›
Control Panel
› Portfolio
› General Portfolio Settings
and select your portfolio page for the Porfolio Page
option.
Back to portfolio edit page ( ›
Pages
› All Pages
› Porfolio
› Edit
)
Add a Portfolio
module to the page by using the content composer. (See: using of the content composer)
You can change the portfolio widget's options to customize your portfolio page.
Now, we should create some portfolio posts to display them on the main portfolio page. (See: creating portfolio posts)
› Portfolio
› Add New
page,Set a featured image,
Set the post options
And hit button.
Contact
› Add new
(or edit current form) page to create a contact form. Contact Form
widget using the content composer to embed the form into your page.
Click Export All
button.
Copy all generated datas.
Click Import
button.
Paste your exported data here and click import button.
Pre-Built Pages
button.
You can see the shortcode generator button at the top of all pages of your admin panel. Just hit the Shortcode Generator
button and generate your shortcode easily.
CSS Entrance Effect
[fx effect='' delay='' start_delay='']
Buttons
[button size='' color='' link='' target='' align='' radius='' block='' icon_position='' icon='' shadow='' title='' custom_effect='' margin_top='' margin_bottom='']Content[/button]
Divider
[divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
[mini_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
[dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
[dashed_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
[fade_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
[fade_dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']
Text Block + Icon
[text_block icon='' link='' lightbox='' position='' title='' title_color='' title_position='' content_align='' tag='' effect_icon='' effect_title='' effect_text='' margin_top='' margin_bottom='']Content[/text_block]
Icon
[icon icon='']
Lists
[list type='' icon_color='' border='']Content[/list]
Message Boxes
[info title='' icon='' shadow='']Content[/info]
[success title='' icon='' shadow='']Content[/success]
[error title='' icon='' shadow='']Content[/error]
[caution title='' icon='' shadow='']Content[/caution]
Blank Space
[space height='' height_tablets='' height_phones='']
Text Rotator
[text_rotator effect='' speed='' color='' border_color='' border_style='' border_width='' block='']Content[/text_rotator]
Custom Titles Typography
[dropcap color='' background='']Content[/dropcap]
[highlight color='' background='']Content[/highlight]
[highlight1 color='' background='']Content[/highlight1]
[highlight2 color='' background='']Content[/highlight2]
[highlight3 color='' background='']Content[/highlight3]
[blockquote color='' background='']Content[/blockquote]
[pullquote_left color='' background='']Content[/pullquote_left]
[pullquote_right color='' background='']Content[/pullquote_right]
[pre color='' background='']Content[/pre]
[code color='' background='']Content[/code]
Sharing Services
[sharrre type='' counter='' align='' margin_top='' margin_bottom='']
Blog
[blog layout='' from='' category='' columns='' limit='' pagination='' title_element='' title_align='' excerpt_length='' show_excerpt='' meta_author='' meta_date='' meta_category='' meta_comment='' meta_likes='' image_ratio='' video_ratio='' list_style='' shadow='' margin_top='' margin_bottom='']
Like the Post
[like_the_post likes_layout='']
Portfolio
[portfolio orderby='' order='' layout='' from='' id_cat='' id_filter='' id_post='' id_selected='' filters='' filters_position='' filters_style='' filters_title='' columns='' limit='' height='' pagination='' title_element='' title_align='' default_icon='' default_button_text='' show_desc='' show_caption='' image_ratio='' video_ratio='' link_target='' gallery_rotate='' shadow='' margin_top='' margin_bottom='']
Contact Form
[contact-form-7 id='']
Gallery
[cfw_gallery device='' columns='' width='' height='' lightbox='' carousel='']Content[/cfw_gallery]
Get Page Content
[the_content id='']
Google Map
[gmap maptype='' height='' address='' latitude='' longitude='' zoom='' marker='' html='' shadow='' doubleclickzoom='' fullwidth='' scrollwheel='' controls='' pancontrol='' zoomcontrol='' maptypecontrol='' scalecontrol='' streetviewcontrol='' overviewmapcontrol='' stylers='' stylers_hue='' stylers_saturation='' stylers_lightness='' stylers_labels_text_color='' stylers_labels_stroke_color='' stylers_road_labels='' stylers_road_lightness='' margin_top='' margin_bottom='']
Single Image
[image id='' class='' floating='' device='' margin_top='' margin_bottom='' margin_left='' margin_right='' src='' retina='' link='' position='' style='' alt='' title='' resize='' lightbox='' lightbox_group='' resize_width='' resize_height='' shadow='']
Logical Condition
[condition condition='' if_false_call_page='']
Progress Bar
[toggle percent='' value='' height='' stripe='' gradient_start='' gradient_stop='' margin_top='' margin_bottom='']Content[/toggle]
Circle Progress Bar
[toggle percent='' size='' rotate='' bar_width='' bar_color='' track_color='' label='' margin_top='' margin_bottom='']Content[/toggle]
Slider
[slider id='']Content[/slider]
Social Services
[socialbar size='' align='' color='' radius='' effect='' start_color='' end_color='' hover_start_color='' hover_end_color='' border_color='' custom_effect='']Content[/socialbar]
Testimonial
[testimonial name='' caption='' image='']Content[/testimonial]
Toggle
[toggle title='' state='' icons='' group='' device='' margin_top='' margin_bottom='']Content[/toggle]
Video
[video type='' url='' autoplay='' shadow='']Content[/video]
HTML5 Video/Audio
[html5_player type='' source_m4v='' source_ogv='' source_webmv='' poster='' autoplay='' shadow='' margin_top='' margin_bottom='']
Widgetized Areas
[widget sidebar='']
Single Columns
[1of2]Content[/1of2]
[1of2_last]Content[/1of2_last]
[1of3]Content[/1of3]
[1of3_last]Content[/1of3_last]
[1of4]Content[/1of4]
[1of4_last]Content[/1of4_last]
[1of5]Content[/1of5]
[1of5_last]Content[/1of5_last]
[1of6]Content[/1of6]
[1of6_last]Content[/1of6_last]
Responsive Content
[responsive device='']Content[/responsive]
Fullwidth Section
[section id='' class='' style_id='' device='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/section]
Boxed Content
[boxed_content id='' class='' device='' radius='' shadow='' shadow_color='' shadow_direction='' gradient_start='' gradient_stop='' bg_image='' bg_position='' bg_attachment='' border_color='' border_style='' border_width='' link='' target='' height='' color='' link_color='' link_hover_color='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/boxed_content]
Twitter Timeline
[twitter_timeline username='' style='' columns='' count='' avatars='' carousel='' effect='' auto_rotate='' rotate_time='' arrows='']
resources/sample sliders/revolution slider
folder in the theme package that downloaded from ThemeForest.
resources/sample sliders/revolution slider
folder in the theme package that downloaded from ThemeForest.
To create a slider, navigate to ›
Slider Manager
, and hit the button.
Insert a name for your new slider and select a slider type. Then hit button again.
Now, you will see the slider options for your new slider. Set the options and save the slider.
We can pass the next step: creating slider items.
After our slider created, we should create some slides for our slider. For that we must go to slider items managing page. And hit button.
Upload your image and set other item options and hit button.
After creating slider items, you can sort your slider items by drag drop method.
To insert a slider into your pages, you should add Slider
module into your pages via the content composer.
After adding the Slider
module, hit to Options
icon, then you will see module options.
Select the slider name that you wish to insert your pages. And save the page.
resources/sample sliders/
folder in the theme package that downloaded from ThemeForest.
Go to ›
Slider Manager
, and hit button.
Selet one of importable slider file, and hit button again.
resources/sample sliders/
folder in the theme package that downloaded from ThemeForest.
Go to ›
Control Panel
› Visual Settings
› All Visual Sets
, and hit button.
Type a name for your set and hit button again.
After creating your new set, click to edit icon to see all visual options.
resources/sample skins/
folder in the theme package that downloaded from ThemeForest.
Go to ›
Control Panel
› Visual Settings
› All Visual Sets
, and hit button.
Selet one of importable visual setting file, and hit button again.
resources/sample skins/
folder in the theme package that downloaded from ThemeForest.
This theme has 2 menu locations
Navigation Menu
- This is main navigation thats located in the headerFooter Menu
- This is located at the bottom above copyright text. This menu does not support dropdown
To enable mega menus, please follow these instructions:
Appearance
› Menu
page.(This is important. If you don't set your menu as Navigation Menu you cannot see the mega menu options)
The theme has 13 sidebars by default. Also, you can create your own custom sidebars under the Theme Control Panel
› Global Settings
› Sidebar Manager
tab and can use them in your pages whatever you want.
First thing you need to do is export your local WordPress database. We will be using phpMyAdmin
to do that. If you are unfamiliar with it, then you might want to take a look at our guide to WordPress database management using phpMyAdmin
. Simply go to http://localhost/phpmyadmin/
and click on your WordPress database. Next, click on the Export button from the top menu bar.
In the Export Method option choose custom, which will provide you with more options to export your database. Select all tables to export and gzipped for compression. Scroll down to the bottom of the page and press the Go button to download your database.
Now open an FTP client and connect to your live site. Once you are connected to your live site, make sure you upload the files in the right directory. For example if you want the site to be hosted on yoursite.com, then you would want to upload all files in your public_html directory. Now select your local WordPress files and upload them to your live server.
While your FTP client is uploading your WordPress files, you can spend this time on importing your database to the live server. Most WordPress hosting providers offer cPanel to manage your hosting account, so we will show you how to create a database using cPanel. Log in to your cPanel dashboard and click on the MySQL databases icon which can be found in the databases section.
On the next screen, create a database by entering a name for your database.
After creating a database, scroll down to MySQL users section and create or add an existing user to the database. After adding the user, cPanel will take you to set MySQL privileges for that user. Simply grant all privileges to the user.
Next step in the process is to import your WordPress database. Go to your cPanel dashboard, scroll down to the databases section and click on phpMyAdmin. This will take you to phpMyAdmin where you want to click on the database you created earlier. phpMyAdmin will show your new database with no tables. Click on the Import tab in the top menu. On the import page, click on choose file button and then select the gzipped database file you saved in step 1. Lastly, press the Go button at the bottom of the page. phpMyadmin will now import your WordPress database.
Now you need to change the site URL, so you can setup your live WordPress site.
To change the site URL smoothly, a PHP script named as searchreplacedb.php
has been added to /resources/tools/
folder in the theme package downloaded from ThemeForest.
To use the script, you should put it in the root folder of your WordPress install (if you wish it to automatically pick up your wp-config) or anywhere else you fancy, but you won’t get the automatic config. You should also, to protect yourself from automated scanners looking for this script, rename it first. eg, you could name it as rrrrreplace.php
– you’d then visit a url like http://example.com/rrrrreplace.php
and follow the on-screen instructions from there.
What you absolutely, 100% certainly MUST do is to delete the script once you’ve finished. If somebody chances on it they can do anything to your database – and that wouldn’t be nice, would it?
Why we should use this script to change the site URL?
When you’re migrating WordPress (or any other platform using serialized PHP strings in the database) between domains, you must use a safe search and replace method that preserves the integrity of the serialized string lengths. A simple of a dump file for http://localhost to, for example, http://thenewdomain.com is problematic because the length of the string changes but the indexes for the serialized strings does not. Consequently settings are lost and widgets disappear. Not good.
This script can now also handle multiply nested serializations, which can happen in transient values in WP at times, and it can also handle multi-byte Unicode changes safely. This is important now that internationalised domain names are allowed.
Now that we have imported the database, and all of our content should be uploaded, it is time to configure WordPress. At this time, your site should be showing an Error Establishing Database Connection
error. To fix this, connect to your website using an FTP client and edit wp-config.php
file. Provide the database name, user and password you created earlier in Step 3. Save the wp-config.php
file and upload it back to your server. Visit your website, and it should be live now.
Login to your WordPress admin panel, and go to Settings
› General
. Click save Options. This will ensure that the site url is corrected anywhere else that needs to be.
Then go to Settings
› Permalink
and click Save to ensure that all post links are working fine.
The theme Envision supports to use different visual sets on pages.
First, create a visual set.
Go to page editing, you will see Custom Skins
section at the right-top of page. Select a different skin from your primary skin here to use it on the page.